import { Navigate, createBrowserRouter } from "react-router-dom";
import Login from "@/views/Login/Login";
import Error403 from "@/views/403";
import Error404 from "@/views/404";
import Welcome from "@/views/Welcome";
import Layout from "@/layout";
import DashBoard from "@/views/DashBoard";
import UserList from "@/views/System/User";

// 当访问根路径"/"时会重定向到"/welcome"，同时在"/"和"/welcome"路径下都会渲染<Layout />组件。
// 这就解释了为什么Layout组件也会在重定向到"/welcome"时被渲染。
// 这是因为在React Router中，路由匹配是从上到下顺序进行的，一旦一个路径被匹配，则对应的组件会被渲染。
// 在你的路由配置中，当访问"/"路径时，首先会匹配到定义的根路径重定向规则，然后重定向到"/welcome"路径。
// 因为"/welcome"路径也匹配到了<Layout />组件，所以<Layout />组件会被渲染。

const routers = [
    {
        path: "/",
        element: <Navigate to="/welcome" />,
    },
    {
        path: "/login",
        element: <Login />,
    },
    {
        element: <Layout />,
        children: [
            {
                path: "/welcome",
                element: <Welcome />,
            },
            {
                path: "/dashboard",
                element: <DashBoard />,
            },
            {
                path: "/userList",
                element: <UserList />,
            },
        ],
    },
    {
        path: "*",
        element: <Navigate to="/404" />,
    },
    {
        path: "/404",
        element: <Error404 />,
    },
    {
        path: "/403",
        element: <Error403 />,
    },
];

// export default function Router() {
//     return useRoutes(routers);
// }

const router = createBrowserRouter(routers);

export default router;
